<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../styles/reset.css">
  <link rel="stylesheet" href="../styles/font.css">
  <link rel="stylesheet" href="../styles/base.css">
  <link rel="stylesheet" href="../styles/css/index.css">
  <title>瑜伽星人</title>
</head>
<body>
  <div class="container">
    <div class="bg-banner">
      <div class="text-scroll">
        <!-- <transition-group tag="ul" name="scroll-up">
          <li v-for="(bltitem,bltindex) in bulletin" :key="bltindex" v-show="bltindex===count">
            <p class="content-wrap">
              <span>公告：</span><span>{{bltitem.content}}</span>
            </p>
          </li>
        </transition-group> -->
      </div>
    </div>
    <!-- <div class="intro-content">
      <p class="intro-title">2018 寻找最美瑜伽馆主</p>
      <ul class="intro-txt">
        <li>湖南卫视金庸纪实频道、现代女性频道、新瑜传媒联袂主办</li>
        <li>聚焦中国瑜伽精英、寻找懂得瑜伽的你</li>
        <li>开启品牌之门共赢经营之道，发现瑜伽之美</li>
        <li>百万创业扶持计划，主流媒体追踪报道，瑜伽明星重资打造</li>
      </ul>
    </div> -->
    <div class="count-wrap count-position">
      <div class="count-item">
        <a href="./rank.html">
          <p class="count-num">1000</p>
          <p class="count-txt">参与人数</p>
        </a>
      </div>
      <div class="count-item">
        <p class="count-num">1000</p>
        <p class="count-txt">投票人次</p>
      </div>
      <div class="count-item">
        <p class="count-num">9999</p>
        <p class="count-txt">访问量</p>
      </div>
    </div>
    <div class="search-wrap">
      <div class="search-block">
        <div class="search-content">
          <form action='' class="search-form">
            <i class="iconfont icon-search"></i>
            <input placeholder="搜索参赛馆主编号或姓名" class="search-input clear-input" type="search" name="keyword" id="search">
          </form>
        </div>
      </div>
      <a href="./rule.html">
        <div class="present">
          <span><i class="iconfont icon-present"></i></span>
          <p class="sm-txt">活动奖品</p>
        </div>
      </a>
    </div>
    <div class="apply-wrap">
      <div class="deadline">
        <p class="deadline-txt">
          <span>活动截止日期：</span>
          <span class="active-txt">2018</span>
          <span>年</span>
          <span class="active-txt">08</span>
          <span>月</span>
          <span class="active-txt">28</span>
          <span>日</span>
          <span class="active-txt">23:59</span>
        </p>
      </div>
      <button class="clear-btn common-btn yellow-btn btn-pos" onclick="window.location.href='./entrance.html';">我要报名</button>
      <button class="clear-btn common-btn yellow-btn btn-pos js-hidden">查看我的主页</button>
    </div>
    <div class="keeper-wrap">
      <div class="keeper-content">
        <div class="keeper-block">
          <a href="./detail.html">
            <div class="keeper-img" style="background-image:url(http://cdn.50yoga.cn/pics/public/sweet/images/shopkeeper/banner2.0.jpg)">
              <div class="keeper-title">999票</div>
              <div class="keeper-info">
                <p class="info-id overflow-txt">编号：9527</p>
                <div class="info-bottom">
                  <span class="info-city overflow-txt">常州市</span>
                  <span class="info-name overflow-txt">zhouting</span>
                </div>
              </div>
            </div>
          </a>
          <button class="clear-btn common-btn middle-btn">投一票</button>
        </div>
        <div class="keeper-block">
          <a href="./detail.html">
            <div class="keeper-img" style="background-image:url(http://cdn.50yoga.cn/pics/public/sweet/images/shopkeeper/banner2.0.jpg)">
              <div class="keeper-title">999票</div>
              <div class="keeper-info">
                <p class="info-id overflow-txt">编号：9527</p>
                <div class="info-bottom">
                  <span class="info-city overflow-txt">常州市</span>
                  <span class="info-name overflow-txt">zhouting</span>
                </div>
              </div>
            </div>
          </a>
          <button class="clear-btn common-btn middle-btn">投一票</button>
        </div>
      </div>
    </div>
    <!-- 投票成功弹框 -->
    <div class="pop-wrap js-hidden">
      <div class="pop-content">
        <img class="success-img" src="http://cdn.50yoga.cn/pics/public/sweet/images/shopkeeper/success.png" width="80" height="80">
        <p class="pop-title">投票成功</p>
        <p>感谢您的支持～</p>
        <button class="clear-btn common-btn vote-btn">确定</button>
      </div>
    </div>
    <!-- 底部Tabbar -->
    <div class="tabbar-wrap" id="tabbar">
      <a class="tab-item" href="./index.html">
        <div class="bottom-wrap active-tab">
          <i class="iconfont icon-home"></i>
          <p class="tab-txt">首页</p>
        </div>
      </a>
      <a class="tab-item" href="./rank.html">
        <div class="bottom-wrap">
          <i class="iconfont icon-linerank"></i>
          <p class="tab-txt">排名</p>
        </div>
      </a>
      <a class="tab-item" href="./entrance.html">
        <div class="bottom-wrap">
          <i class="iconfont icon-edit"></i>
          <p class="tab-txt">报名</p>
        </div>
      </a>
      <a class="tab-item" href="./rule.html">
        <div class="bottom-wrap">
          <i class="iconfont icon-rule"></i>
          <p class="tab-txt">规则</p>
        </div> 
      </a>
    </div>
  </div>
  <script>
    window.onload = function(){
      var tabs = document.getElementById('tabbar').getElementsByTagName('a')
      console.log(tabs.length);
    }
  </script>  
</body>
</html>